<template>
    <el-select filterable v-model="value" placeholder="请选择或者新增">
        <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value" />
        <template #footer>
            <el-button v-if="!isAdding" text bg size="small" @click="onAddOption">
                新增
            </el-button>
            <template v-else>
                <el-input v-model="optionName" class="option-input" placeholder="请输入名称" size="small" />
                <el-button type="primary" size="small" @click="onConfirm">
                    确定
                </el-button>
                <el-button size="small" @click="clear">取消</el-button>
            </template>
        </template>
    </el-select>
</template>

<script lang="js" setup>
import { ref } from 'vue'
const emit = defineEmits(['addOption'])
const props = defineProps({
    selectList: {
        type: Array,
        default: () => [
            //     {
            //         value: 'Beijing',
            //         label: 'Beijing',
            //     },
        ],
    },
})
const isAdding = ref(false)
const value = ref([])
const optionName = ref('')
// const selectList = ref([
//     {
//         value: 'Beijing',
//         label: 'Beijing',
//     },
//     {
//         value: 'Shanghai',
//         label: 'Shanghai',
//     },
//     {
//         value: 'Nanjing',
//         label: 'Nanjing',
//     },
//     {
//         value: 'Chengdu',
//         label: 'Chengdu',
//     },
//     {
//         value: 'Shenzhen',
//         label: 'Shenzhen',
//     },
//     {
//         value: 'Guangzhou',
//         label: 'Guangzhou',
//     },
// ])

const onAddOption = () => {
    isAdding.value = true
}

const onConfirm = () => {
    if (optionName.value) {
        emit('addOption', optionName.value)
        // props.selectList.push({
        //     label: optionName.value,
        //     value: optionName.value,
        // })
        clear()
    }
}

const clear = () => {
    optionName.value = ''
    isAdding.value = false
}
</script>

<style>
.option-input {
    width: 100%;
    margin-bottom: 8px;
}
</style>